<template>
  <div id="PayCards">
        <div>
            <div class="payCards_div1">
                <el-row style="margin-bottom:50px;">
                    <el-col :span="5">
                        <p class="payCards_p2">所有购买记录</p>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <div v-for="item in userList" :key="item.id">
                            <img :src="'http://127.0.0.1:8082/getImageById?id=' + item.avatarId " class="payCards_img1"/>
                            <p class="payCards_p1">{{item.userName}}</p>
                            <p class="payCards_p1">账号：{{item.loginName}}</p>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <el-date-picker
                            v-model="value1"
                            align="right"
                            type="date"
                            placeholder="选择购买会员卡起始日期"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                        <span style="margin-left:20px;">至</span>
                        <el-date-picker
                            style="margin-left:20px;"
                            v-model="value2"
                            align="right"
                            type="date"
                            placeholder="选择购买会员卡结束日期"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-col>
                     <el-col :span="2" :offset="1"><el-button icon="el-icon-search" @click="getBuyRecord" circle></el-button></el-col>
                     <el-col :span="2" ><el-button type="success" round @click="Statistics">统计</el-button></el-col>
                </el-row>
                <!-- 交易记录表单 -->
                <el-row style="margin-top:30px;">
                    <el-table
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="开通账号">
                                        <span>{{props.row.loginName}}</span>
                                    </el-form-item>    
                                    <el-form-item label="商品名称">
                                        <span>{{ props.row.cardName }}</span>
                                    </el-form-item>
                                    <el-form-item label="购买月份">
                                        <span>{{ props.row.purchaseMonth }}</span>
                                    </el-form-item>
                                    <el-form-item label="价钱">
                                        <span>{{ props.row.cardPrice }}</span>
                                    </el-form-item>
                                    <el-form-item label="购买时间">
                                        <span>{{ props.row.createTime }}</span>
                                    </el-form-item>
                                    <el-form-item label="过期时间">
                                        <span>{{ props.row.expirationTime|formatDate('yyyy-MM-dd HH:mm:ss') }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="购买会员卡类型"
                            prop="cardName">
                        </el-table-column>
                        <el-table-column
                            label="购买日期"
                            prop="createTime">
                        </el-table-column>
                        <el-table-column
                            label="购买月份"
                            prop="purchaseMonth">
                        </el-table-column>
                        <el-table-column
                            label="价钱"
                            prop="cardPrice">
                        </el-table-column>
                    </el-table>
                    <el-row style="text-align: center;margin-top:30px;">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                        </el-pagination>          
                    </el-row>
                </el-row>
                <el-dialog title="统计" :visible.sync="Notice" style="width:800px;height:800px;margin-left:30%;margin-top:10%">
                    <p>您一共消费{{this.altogetherPrice}}元</p>
                    <p>您开通{{this.SilverCardName}}消费{{this.SilverCardPrice}}元</p>
                    <p>您开通{{this.GoldCardName}}消费{{this.GoldenCardPrice}}元</p>
                </el-dialog>
            </div>    
        </div>
  </div>
</template>

<script>
const axios = require('axios');
export default {
    name: 'PayCards',
    data(){
        return{
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            //存放查询起始的购买时间
            value1: '',
            //存放查询结束的购买时间
            value2: '',
            //接收我的会员卡页面id
            id:'',
            //用户信息
            userList:[],
            //查询用户购买记录
            tableData: [],
            currentRow: null,
            //分页当前选中页
            currentPage4: 1,
                page:{
                    //条数
                    pageSize:10,
                    //页数
                    pageNum:1,
                    total:0
                },
            tatal:0,
            //获取头部用户账号
            loginName:'',
            
            //统计弹窗默认值
            Notice:false,
            //弹窗获取用户开通金卡的钱
            GoldenCardPrice:'0',
            //弹窗获取用户开通银卡的钱
            SilverCardPrice:'0',
            //弹窗获取用户开通会员卡的所有金额
            altogetherPrice:'0',
            //弹窗获取用户开通银卡名称
            SilverCardName:'',
            //弹窗获取用户开通金卡名称
            GoldCardName:'',
            //统计信息
            StatisticsList:[],
        }
    },
    methods:{
        //统计按钮展示
        Statistics(){
            this.Notice = true
            
        },
        //设置时间为当天时间为23：59：59
        timeSet(value){
                var date = new Date(value); //new Date(value*1000);根据时间戳格式进行选择乘1000或否
                var timeDate;
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                var h =  23 + ':';
                var m =  59 + ':';
                var s =  59;
                timeDate = Y + M + D + h + m + s;
                return timeDate
        },
        //设置时间为当天时间为0:0:0
        timeSet1(value){
                var date = new Date(value); //new Date(value*1000);根据时间戳格式进行选择乘1000或否
                var timeDate;
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                var h =  0 + ':';
                var m =  0 + ':';
                var s =  0;
                timeDate = Y + M + D + h + m + s;
                return timeDate
        },
        //分页
        handleSizeChange(ps) {
            this.page.pageSize=ps;
            this.getBuyRecord()
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(pn) {
            this.page.pageNum=pn;
            this.getBuyRecord()
        },
        //查询用户信息
        getQueryUserList(){
            this.id = this.$route.query.id
            this.loginName = window.sessionStorage.getItem('loginName')
            axios.get('http://127.0.0.1:8082/user/getQueryUserList?id=' + this.id).then(res=>{
                this.userList = res.data.obj
            }).catch(error => {
                this.$message.error('查询用户失败！');
            })
        },

        //查询用户所有购买记录
        getBuyRecord(){
            if(this.value2==='' || this.value2===null){
                this.value2 = this.timeSet(new Date)
            }
            if(this.value2!==''){
                this.value2=this.timeSet(this.value2)
            }
            if(this.value1===null){
                this.value1 = ''
            }
            if(this.value1!==''){
                this.value1 = this.timeSet1(this.value1)
            }
            this.id = this.$route.query.id
            
            axios.get('http://127.0.0.1:8082/cardRecord/getBuyRecord',{
                params: {
                    userId: this.id,
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                    createTime: this.value1,
                    createTime1: this.value2
                }
            }).then(res=>{
                this.tableData = res.data.content
                this.page.total = res.data.total
            }).catch(error => {
                this.$message.error('查询用户所有购买记录失败！');
            })
        },
        //查询统计信息
        getStatistics(){
            axios.get('http://127.0.0.1:8082/cardRecord/getStatistics',{
                params: {
                    userId: this.id,
                }
            }).then(res=>{
                this.StatisticsList = res.data.obj
                this.StatisticsList.forEach((item)=>{
                    this.altogetherPrice = parseInt(this.altogetherPrice) + item.cardPrice
                    if(item.cardId ===8){
                        this.SilverCardName = item.cardName
                        this.SilverCardPrice = parseInt(this.SilverCardPrice)+item.cardPrice
                    }
                    if(item.cardId ===9){
                        this.GoldCardName = item.cardName
                        this.GoldenCardPrice = parseInt(this.GoldenCardPrice)+item.cardPrice
                    }
                })
            })
        },
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            });
        },
    },
    mounted(){
        //查询用户信息
        this.getQueryUserList()
        //查询用户购买所有会员卡信息
        this.getBuyRecord()
        //查询统计信息
        this.getStatistics()
    },
    //格式化时间
    filters:{
        formatDate: function(value,args) {
            var dt = new Date(value);
            if(args == 'yyyy-M-d') {// yyyy-M-d
            let year = dt.getFullYear();
            let month = dt.getMonth() + 1;
            let date = dt.getDate();
            return `${year}-${month}-${date}`;
        } else if(args == 'yyyy-M-d H:m:s'){// yyyy-M-d H:m:s
            let year = dt.getFullYear();
            let month = dt.getMonth() + 1;
            let date = dt.getDate();
            let hour = dt.getHours();
            let minute = dt.getMinutes();
            let second = dt.getSeconds();
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        } else if(args == 'yyyy-MM-dd') {// yyyy-MM-dd
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            return `${year}-${month}-${date}`;
        } else {// yyyy-MM-dd HH:mm:ss
            let year = dt.getFullYear();
            let month = (dt.getMonth() + 1).toString().padStart(2,'0');
            let date = dt.getDate().toString().padStart(2,'0');
            let hour = dt.getHours().toString().padStart(2,'0');
            let minute = dt.getMinutes().toString().padStart(2,'0');
            let second = dt.getSeconds().toString().padStart(2,'0');
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
        }
        }
    }
}
</script>

<style scoped>
.payCards_div1{
    margin:0 auto;
    width:1200px;
    height:800px;
    margin-top:30px;
}
.payCards_img1{
    width:60px;
    height:60px;
    border-radius: 60%;
    float:left;
}
.payCards_p1{
    float: left;
    font-size:16px;
    margin-left:40px;
    margin-top:6px;
    width: 120px;
}
.payCards_p2{
    font-size:20px;
    font-weight: bold;
}
.payCards_font1{
    font-size:14px;
    /* color:rgb(164, 167, 170); */
    margin-bottom: 30px;
    border-bottom: 1px solid rgb(164, 167, 170);
}
.payCards_font2{
    font-size:28px;
    font-weight: bold;
    margin-left:120px;
}
.payCards_p3{
    font-size:14px;
    margin-bottom: 30px;
}
.PayCards_span1{
    font-size:16px;
    margin-left:40px;
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>